<template>
    <div class="rongqi">
        <!-- <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        > -->
            <div style="width;100%;height:1px;"></div>
            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>

            <div class="item" @click="tonr">
                <div class="shang">
                    <div class="title">吃中药是饭前吃还是饭后吃好</div>
                    <div class="time">今天6:00</div>
                    <div class="nr">中药在饭前或饭后服用，要根据具体病情而定；从 中医理论来讲，一般来说，胃部以上理论来讲，一般来说，胃部以上疾病疾病，时</div>
                </div>
                <div class="xia">
                    <div>查看详情</div>
                    <img src="../../assets/img/ckgd.png" alt="">
                </div>
            </div>
        <!-- </van-list> -->

    </div>
</template>

<script>
    export default {
        name:'message',
        data() {
            return {
                
            }
        },
        methods: {
            // 跳转详情
            tonr() {
                this.$router.push({  //核心语句
                    path:'/messagedetail',   //跳转的路径
                    query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                        // id:this.id ,  
                    }
                })
            },
        
        },
    }
</script>

<style  scoped>
    .rongqi{
        background-color: #F8F8F8;
        width:100%;
        height: 100vh;
        /* background: url('../../assets/img/123.png') no-repeat;  */
        /* background-image: linear-gradient(red, #000); */
        min-height:100vh;
        overflow: hidden;
        overflow-y: scroll;
    }
    .item{
        width:687px;
        height:331px;
        background:rgba(255,255,255,1);
        border:1PX solid rgba(229, 229, 229, 1);
        border-radius:10px;
       
        box-sizing: border-box;
        margin: 20px auto 0;

    }
    .title{
        font-size:32px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .time{
        font-size:26px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        margin: 19px 0 35px;
    }
    .nr{
        font-size:30px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(102,102,102,1);
        line-height:40px;

         text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .shang{
        padding: 0 17px;
        height:243px;
        border-bottom:1PX solid rgba(229, 229, 229, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .xia{
        padding: 0 17px;
        height:87px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:28px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(0,0,0,1);
    }
    .xia img{
        width:14px;
        height:29px;
    }

</style>
<style>
.van-list{
    height: 90vh;
    
}

</style>